* {
    margin : 0;
    padding: 0;

}

:root {
    --phone-width : 100%;
    --cp-width    : 70%;
    --api-width   : 25%;
    --data-width  : 45%;
    --status-width: 15%;
    --check-width : 15%;
}


html {
    overflow-x: hidden;
    font-size : 62.5%;
}

body {
    width          : 100vw;
    height         : 100vh;
    display        : flex;
    justify-content: center;
    color          : #4f6b72;
    background     : #E6EAE9;
}

@media screen and (max-width:850px) {

    #APItable {
        width       : var(--phone-width);
        table-layout: fixed;
    }

    caption {
        padding: 0 0 1% 0;
        width  : var(--phone-width);

    }

    th {
        font          : bold "Times-New-Roman";
        font-size     : 4vw;
        color         : #4f6b72;
        border-right  : 1px solid #C1DAD7;
        border-bottom : 1px solid #C1DAD7;
        border-top    : 1px solid #C1DAD7;
        letter-spacing: 0.05em;
        text-align    : center;
        padding       : 3%;
        background    : #CAE8EA no-repeat;
        overflow      : auto;

    }

    th:nth-of-type(3) {
        width    : var(--status-width);
        font-size: 1.1em;
    }

    th:nth-of-type(4) {
        width    : var(--check-width);
        font-size: 1.1em;
    }

}

@media screen and (min-width:850px) {

    #APItable {
        width: var(--cp-width);

    }

    th {
        font          : bold "Times-New-Roman";
        font-size     : 2vw;
        color         : #4f6b72;
        border-right  : 1px solid #C1DAD7;
        border-bottom : 1px solid #C1DAD7;
        border-top    : 1px solid #C1DAD7;
        letter-spacing: 0.05em;
        text-align    : center;
        padding       : 3%;
        background    : #CAE8EA no-repeat;
        overflow      : hidden;

    }

}

th:nth-of-type(1) {
    width: var(--api-width);
}

th:nth-of-type(2) {
    width: var(--data-width);
}

th:nth-of-type(3) {
    width: var(--status-width);
}

th:nth-of-type(4) {
    width: var(--check-width);
}

td {

    border-right : 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background   : #fff;
    padding      : 3% 2%;
    overflow     : auto;
    font-size    : 1.5em;
    color        : #4f6b72;

}

td:nth-of-type(2) {
    color    : rgb(33, 107, 175);
    word-wrap: break-word;
}

td:nth-of-type(3),
td:nth-of-type(4) {
    text-align: center;
    font-size : 2em;
}

.butt {
    text-decoration : none;
    letter-spacing  : 0.1em;
    border-style    : none;
    padding         : 10%;
    width           : 50%;
    border-radius   : 5px;
    background-color: rgba(83, 243, 195, 0.74);
    cursor          : pointer;
    outline         : none;
}

.butt:focus {
    border-style    : none;
    background-color: rgb(199, 205, 211);
}

.logout{
    position: relative;
    left: 10%;
    font-size: 2em;
    cursor: pointer;
    text-decoration: underline darkblue;
    
}